<template>
  <div>
    <div style="margin: 5px">
      <a-button @click="addModelVisible=true" type="primary">
        <template #icon>
          <icon-user-add />
        </template>
        添加联系人
      </a-button>
      <!--      搜索框-->
      <a-input-search style="width:220px;margin: 0 7px;"
                      placeholder="搜索联系人"
                      search-button
                      @search="searchHandle()"
                      v-model="searchParams.name" />
    </div>

    <a-scrollbar style="height:80vh;overflow: auto;">
      <a-empty v-if="emptyFlag" />
      <a-table v-if="!emptyFlag" :columns="columns" :data="data" column-resizable :pagination="false">
        <template #columns>
          <a-table-column title="用户id" data-index="id"></a-table-column>
          <a-table-column title="用户名" data-index="name"></a-table-column>
          <a-table-column title="联系电话" data-index="phone"></a-table-column>
          <a-table-column title="地址" data-index="address"></a-table-column>

          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-button type="primary" style="margin-right: 5px"
                        @click="showAlterModelFunc(record)">
                <template #icon>
                  <icon-edit />
                </template>
                修改
              </a-button>
              <a-button @click="deleteHandle(record.name)">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-scrollbar>

    <!--    添加对话框-->
    <a-modal v-model:visible="addModelVisible"
             hide-cancel
             :ok-button-props="{style:{display:'none'}}"
             title="添加联系人">
      <a-form ref="addFormRef"
              :model="addModelForm"
              @submit="addHandleSubmit">
        <a-form-item field="name" label="用户名"
                     :rules="[{required:true,message:'请输入用户名'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model="addModelForm.name" placeholder="用户名" allow-clear />
        </a-form-item>

        <a-form-item field="phone" label="联系电话"
                     :rules="[{required:true,message:'请输入联系电话'},{minLength:11,maxLength:11,message:'电话号码必须11位'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model="addModelForm.phone" placeholder="联系电话" allow-clear />
        </a-form-item>

        <a-form-item field="address" label="地址"
                     :rules="[{required:true,message:'请输入地址'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model="addModelForm.address" placeholder="地址" allow-clear />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">提交</a-button>
            <a-button @click="addFormRef.resetFields()">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
    <!--    修改对话框-->
    <a-modal v-model:visible="alterModelVisible"
             hide-cancel
             :ok-button-props="{style:{display:'none'}}"
             title="修改联系人">
      <a-form ref="alterFormRef"
              :model="alterModelForm"
              @submit="alterHandleSubmit">
        <a-form-item field="name" label="用户名"
                     :rules="[{required:true,message:'请输入用户名'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input disabled v-model="alterModelForm.name" placeholder="用户名" allow-clear />
        </a-form-item>

        <a-form-item field="phone" label="联系电话"
                     :rules="[{required:true,message:'请输入联系电话'},{minLength:11,maxLength:11,message:'电话号码必须11位'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model="alterModelForm.phone" placeholder="联系电话" allow-clear />
        </a-form-item>

        <a-form-item field="address" label="地址"
                     :rules="[{required:true,message:'请输入地址'}]"
                     :validate-trigger="['change','input']"
        >
          <a-input v-model="alterModelForm.address" placeholder="地址" allow-clear />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">修改</a-button>
            <a-button @click="alterModelForm.resetFields()">
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--    分页器-->
    <!--    <a-pagination style="margin-top: 5px"-->
    <!--                  :total="searchParams.total"-->
    <!--                  v-model:current="searchParams.curPage"-->
    <!--                  v-model:page-size="searchParams.pageSize"-->
    <!--                  :page-size-options="[5,10,15,20]"-->
    <!--                  @page-size-change="searchHandle()"-->
    <!--                  @change="searchHandle()"-->
    <!--                  show-total-->
    <!--                  show-jumper-->
    <!--                  show-page-size />-->
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { type UserInfo } from '@/types/UserInfo'
import { IconDelete, IconEdit, IconUserAdd } from '@arco-design/web-vue/es/icon'
import { Message } from '@arco-design/web-vue'

import axios from 'axios'

let addModelVisible = ref(false)
let alterModelVisible = ref(false)

let addFormRef = ref()
let alterFormRef = ref()
let addModelForm = reactive({
  name: '',
  phone: '',
  address: ''
})

let showAlterModelFunc = (recode: UserInfo) => {
  console.log('recode:', recode)
  alterModelVisible.value = true
  alterModelForm.name = recode.name
  alterModelForm.phone = recode.phone
  alterModelForm.address = recode.address
  console.log('alterModelForm:', alterModelForm)

}

let alterModelForm = reactive({
  name: '',
  phone: '',
  address: ''
})
let emptyFlag = ref(false)

let data = ref<Array<UserInfo>>([
  {
    id: 4,
    name: '赵云',
    phone: '154-6789-0123',
    address: '上海路1234'
  }
])
let searchHandle = async () => {

  if (searchParams.value.name == '') {
    //   查询所有
    await axios.get('http://127.0.0.1:8080/admin').then(
      res => {
        data.value = res.data
        emptyFlag.value = false
        console.log(res)
      },
      err => {
        console.log('err:', err)
      }
    )
  } else {
    // 查询指定用户名
    await axios.get('http://127.0.0.1:8080/admin?name=' + searchParams.value.name).then(
      res => {
        console.log(res)
        // 如果res为空或者res.data为空则讲empty置为true
        if (res == null || res.data[0] == null) {
          emptyFlag.value = true
        } else {
          emptyFlag.value = false
          data.value = res.data
        }
        console.log('data:', data.value, emptyFlag.value)
      },
      err => {
        console.log(err)
      }
    )
  }
}

const columns = [
  {
    title: '用户ID',
    dataIndex: 'id',
    sortable: {
      sortDirections: ['ascend']
    }
  },
  {
    title: '用户名',
    dataIndex: 'name',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '联系电话',
    dataIndex: 'phone'
  },
  {
    title: '地址',
    dataIndex: 'address'
  }
]


const addHandleSubmit = async ({ values, errors }) => {
  if (errors == undefined) {
    //   添加联系人
    console.log('addModelForm:', addModelForm)
    await axios.put('http://127.0.0.1:8080/admin', addModelForm).then(
      res => {
        addModelVisible.value = false
        Message.success('添加成功')
        addFormRef.value.resetFields()
        searchHandle()
      },
      err => {
        console.log(err)
      }
    )
  }
}
const alterHandleSubmit = async ({ values, errors }) => {
  if (errors == undefined) {
    //   修改联系人
    console.log('alterModelForm:', alterModelForm)
    await axios.put('http://127.0.0.1:8080/admin', alterModelForm).then(
      res => {
        alterModelVisible.value = false
        Message.success('修改成功')
        alterFormRef.value.resetFields()
        searchHandle()
      },
      err => {
        console.log(err)
      }
    )
  }
}


let searchParams = ref({
  name: '',
  curPage: 1,
  pageSize: 5,
  total: 50
})

let deleteHandle = async (name: string) => {
  await axios.delete('http://127.0.0.1:8080/admin?name=' + name).then(
    res => {
      console.log(res)
      Message.success('删除成功')
      searchHandle()
    },
    err => {
      console.log(err)
    }
  )
}

onMounted(() => {
  searchHandle()
})

</script>